<template>
  <div class="layoutDIV">
    <div class="add_btn_top">
      <el-button type="primary" class="" size="mini" @click="openAdd">
        <i class="el-icon-plus"></i>添加
      </el-button>
    </div>

    <add-device-group :showDeviceAdd="addFlag" @closeDialog="closeDialog" />
    <div class="" v-init-screen-h>
      <div class="boxDiv" v-if="deviceGoupList && deviceGoupList.length != 0">
        <div class="my_box_bg content_height">
          <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="lgNum"
              :xl="6"
              v-for="(deviceGoup, index) in deviceGoupList"
              :key="index"
              style="margin-bottom: 20px"
            >
              <div
                class="list_item listHoverStyle"
                @click="toDeviceGroupDetails(deviceGoup.token)"
              >
                <div class="item_top">
                  <div class="img_msg">
                    <el-image
                      class="img"
                      :src="deviceGoup.imageUrl | filtersFileUrl()"
                    ></el-image>
                    <div class="msg_box">
                      <div class="title" :title="deviceGoup.name">
                        {{ deviceGoup.name }}
                      </div>
                      <div class="summary" :title="deviceGoup.token">
                        Token: {{ deviceGoup.token }}
                      </div>
                      <div class="item_bottom" v-if="deviceGoup.description">
                        <div class="list_box" :title="deviceGoup.description">
                          描述: {{ deviceGoup.description }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <empty-data
          v-if="deviceGoupList && deviceGoupList.length == 0"
        ></empty-data>
      </div>
      <EmptyData v-else></EmptyData>
    </div>
    <!-- v-if="showPage" -->
    <Pagination
      @pagination="pagination"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageSizes.sync="pageSizes"
    />
  </div>
</template>

<script>
import "../../../assets/style/deviceCss/commonStyle.css";
import addDeviceGroup from "./addDeviceGroup.vue";
import Pagination from "@/views/common/page";
import EmptyData from "@/views/common/emptyData";
import { getDeviceGroupLists } from "@/api/deviceGroup";
export default {
  components: {
    Pagination,
    addDeviceGroup,
    EmptyData,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      lgNum: 6,
      total: 0,
      addFlag: false,
      deviceGoupList: [],
      roleName: "",
      totalPage: 1,
      noDataImg: require("@/assets/datatip.png"),
    };
  },
  mounted() {
    this.deviceGoupList = null;
    this.getDeviceGroupList();
  },
  computed: {
    showPage: {
      get: function () {
        return this.total / this.pageSize <= 1 ? false : true;
      },
      set: function (v) {
        this.totalPage =
          this.total / this.pageSize < 1 ? 1 : this.total / this.pageSize + 1;
      },
    },
  },
  watch: {
    showPage(newVal, oldVal) {
      console.info(newVal, "计算   showPage");
    },
  },
  methods: {
    // 打开弹窗
    openAdd() {
      this.addFlag = true;
    },
    closeDialog(isRefresh) {
      this.addFlag = false;
      if (isRefresh) {
        this.getDeviceGroupList();
      }
    },
    toDeviceGroupDetails(token) {
      this.$router.push({
        path: "deviceGroupDetail",
        query: { deviceGroupToken: token },
      });
    },
    async getDeviceGroupList() {
      this.loading = true;
      let params = {
        page: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.roleName != "") {
        Object.assign(params, { role: this.roleName });
      }
      getDeviceGroupLists(params)
        .then((res) => {
          this.total = res.data.numResults;
          this.deviceGoupList = res.data.results;
        })
        .finally((f) => {
          this.loading = false;
        });
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.totalPage = this.total / limit < 1 ? 1 : this.total / limit + 1;
      this.showPage = this.totalPage <= 1 ? false : true;
      this.getDeviceGroupList();
    },
    doSearch(val) {
      this.getDeviceGroupList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.layoutDIV {
  /* overflow: hidden; */
  width: 100%;
  height: 100%;
  /* margin-bottom: 10px; */
  background-color: #fff;
  padding: 20px;
  padding-bottom: 0;
  .addbutton {
    right: 0;
    position: absolute;
    top: -36px;
    background-color: #2680d2;
    color: #ffffff;
  }
  .my_box_bg {
    width: 100%;
    background-color: #fff;
  }
  .boxDiv {
    width: 100%;
    background-color: #fff;
    /* height: calc(100vh - 150px) !important ; */
    overflow-y: auto;
    .list_item {
      padding: 16px;
      border: 1px solid #e4e4e4;
      border-radius: 2px;
      .item_top {
        display: flex;
        justify-content: space-between;
        // margin-bottom: 12px;
        // height: 80px;
        .img_msg {
          display: flex;
        }
        .img {
          width: 71px;
          height: 71px;
          margin-right: 16px;
          margin-top: 0px;
          flex-shrink: 0;
        }
        .msg_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 72px;
          .title {
            color: #333333;
            font-size: 16px;
            @include textoverflow(1);
          }
          .summary {
            font-size: 12px;
            color: #707070;
            @include textoverflow(1);
          }
        }
      }

      .item_bottom {
        @include textoverflow(2);
        color: #999999;
        font-size: 12px;
        /* margin-top: 10px; */
        /* display: flex;
        justify-content: space-between; */
        /* flex-wrap: wrap; */
        // height: 36px;
        /* .list_box {
          min-height: 34px;
          left: 16px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          line-height: 18px;
          margin-top: 10px;
          color: #999999;
          overflow: hidden;
          text-overflow: ellipsis;
          //white-space: nowrap;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        } */
      }
    }
  }
}
</style>
